/*
 * game list
**/
<template>
<div>
<v-tab></v-tab>
<div class="weui-cells mod-items">
  <div class="filter-box">
  	<ul class="f-item clear">
  		<li :class="{'active': item.cid == cid}" v-for="item in gameTypeList" @click="tab(item.cid)">
  			<i class="icon" :style="{backgroundImage: 'url('+item.thumb+')'}"></i>
  			<span class="f-name">{{item.title}}</span>
  		</li>
  	</ul>
  </div>
  <div class="game-pd" v-load-more="loaderMore">
	  <div class="game-box">
	    <div class="weui-cell" v-for="el in gameList">
	      <div class="weui-cell__hd def-icon">
	        <img :src="el.icon" alt="" class="logo"/>
	      </div>
	      <div class="weui-cell__bd">
	        <p class="cell__bd-tit ellipsis">{{el.title}}</p>
	        <p class="cell__bd-dsc">已参与{{el.people}}人</p>
	      </div>
	      <div class="weui-cell__ft reset-ft">
	        <a class="btn" @click="turnGame(el.tid, el.link)">开始游戏</a>
	        <a class="btn" @click="info(el)" style="top:.5rem;">游戏简介</a>
	      </div>
	    </div>
	  </div>
	  <div class="weui-loadmore" v-if="showLoading">
	    <i class="weui-loading"></i>
	    <span class="weui-loadmore__tips">正在加载</span>
	  </div>
	  <div class="weui-loadmore weui-loadmore_line" v-if="touchend">
	      <span class="weui-loadmore__tips">期待上新</span>
	  </div>
  </div>
</div>
<div v-if="inGetData">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast" style="margin-top:3.8em; background:rgba(17, 17, 17, 0.5)">
        <i class="weui-loading weui-icon_toast"></i>
        <p class="weui-toast__content">数据加载中</p>
    </div>
</div>
<div class="mod-footer-place"></div>
<div class="info-box" v-show="infoshow">
	<div class="info-con">
		<div class="info-item">
			<h1 class="info-title">游戏介绍</h1>
			<p class="info-desc">{{infoObj.content}}</p>
		</div>
		<div class="info-item">
			<h1 class="info-title">游戏玩法</h1>
			<p class="info-desc">{{infoObj.way}}</p>
		</div>
		<a class="close" @click="infoshow=false">x</a>
		<a class="btn" @click="turnGame(infoObj.tid, infoObj.link)">开始游戏</a>
	</div>
</div>
</div>
</template>
<script>
import {getGameList, getGameTypeList, setGameRecord} from 'src/service/getData'
import {loadMore} from 'src/config/mixin'
import vTab from 'components/common/tab'
export default {
  data () {
    return {
      inGetData: false,
      cid: 0, // 类型ID
      currentPage: 1,
      gameList: [],
      gameTypeList: [],
      touchend: false, // 没有更多数据
      showLoading: true, // 显示加载动画
      preventRepeatReuqest: false, // 到达底部加载数据，防止重复加载
      pageSize: 10, // 每页显示数据条数
      infoshow: false, // 详情弹窗开关
      infoObj: { // 详情
        way: '',
        content: '',
        link: '',
        tid: ''
      }
    }
  },
  mixins: [loadMore],
  components: {
    'v-tab': vTab
  },
  mounted () {
    this.initData()
  },
  methods: {
    initData () {
      this.inGetData = true
      this.getGameTypeList()
    },
    async getGameTypeList () { // 加载游戏类型列表
      let tmpData = await getGameTypeList(1)
      if (tmpData.code !== 0) return
      this.gameTypeList = tmpData.data.list

      // 加载第一个类型数据
      this.tab(this.gameTypeList[0].cid)
    },
    tab (cid) {
      if (this.cid === cid) return
      this.inGetData = true
      this.touchend = false
      // 查询条件
      this.cid = cid
      this.currentPage = 1
      this.getGameList()
    },
    async getGameList (more) { // 加载游戏列表
      // 最后一页不再加载
      if (this.touchend) {
        return
      }
      // 防止重复请求
      if (this.preventRepeatReuqest) {
        return
      }
      this.showLoading = true
      this.preventRepeatReuqest = true
      if (more) this.currentPage++
      let tmpData = await getGameList(this.currentPage, this.cid, this.pageSize)
      this.showLoading = false
      this.inGetData = false
      if (tmpData.code !== 0) return
      let dataList = tmpData.data.list
      // 加载更多 or 重新加载
      if (more) {
        this.gameList = [...this.gameList, ...dataList]
      } else {
        this.gameList = dataList
      }
      // 最后一页
      if (dataList.length < this.pageSize) {
        this.touchend = true
      }
      this.preventRepeatReuqest = false
    },
    loaderMore () {
      this.getGameList(true)
    },
    info (elem) {
      this.infoObj.way = elem.way
      this.infoObj.content = elem.content
      this.infoObj.link = elem.link
      this.tid = elem.tid
      this.infoshow = true
    },
    turnGame (_tid, _link) { // 跳转到游戏
      setGameRecord(_tid)
      window.location.href = _link
    }
  }
}
</script>
<style scoped>
	.weui-cells.mod-items{margin:0rem !important;}
	.f-item li{float: left; width: 0.9rem; text-align: center;padding: 12px 0 10px;position: relative;}
	.f-item .icon{width: 0.41rem; height: 0.41rem; display: inline-block;background-repeat:no-repeat; background-size:100% auto;}
	.f-item .f-name{display: block; text-align: center; font-size: 0.08rem;}
	.f-item li.active .f-name{font-size: 0.1rem; padding-top: 0.02rem;}
	.f-item li.active .icon{transform: scale(1.26);}
	.f-item li.active:after{content: ''; border: 5px solid transparent; border-bottom: 10px solid #efeff4; position: absolute; bottom: 0;left: 0.4rem;}
	.game-pd{background: #efeff4; padding: 0 0.1rem; border-top: 1px solid #efeff4;}
	.game-pd .weui-loadmore__tips{background: #efeff4;}
	.game-box .weui-cell{padding: 0.07rem;align-items: initial;margin-top: 0.1rem;background:#fff;}
	.game-box .def-icon{width: 0.8rem; height: 0.8rem; overflow: hidden;margin-right: 0.22rem;}
	.game-box .logo{width: 100%;}
	.game-box .cell__bd-tit{font-size: 0.15rem; color: #333; line-height: 0.3rem;font-weight: 300;width:1.3rem  !important}
	.game-box .cell__bd-dsc{color: #f2a63b; font-size: 0.11rem; line-height: 0.3rem;}
	.game-box .weui-cell .weui-cell__ft{align-items: initial;}
	.btn{width: 0.86rem; line-height: 0.23rem; background: #ffa200; color: #fff; font-size: 0.11rem; border-radius: 22px; text-align: center; position: absolute; top: 0.2rem; right: 0.22rem;}
	.loadmore{background: #fff;}
	.info-box{position: fixed; top: 0; bottom: 0; left: 0; right: 0;background: hsla(0,0%,100%,.9); z-index: 1000;}
	.info-con{width: 3.09rem; margin: 1rem auto; padding: 0.26rem 0.16rem; background: #fff; border-radius: 8px; box-shadow: 1px 2px 6px 0 #ccc;position: relative;}
	.info-item{margin-top: 0.14rem;}
	.info-title{font-size: 0.12rem; color: #ffa200;} 
	.info-desc{color: #333; font-size: 0.1rem; padding: 0.23rem 0.16rem; background: #f8f8f8; border-radius: 8px;}
	.info-box .close{position: absolute; width: 0.27rem; height: 0.34rem; background: #ffa200; color: #fff; text-align: center; top: 0; right: 0.15rem; border-radius: 2px 2px 22px 22px; padding-top: 0.05rem;}
	.info-box .btn{margin:0 auto;margin-top: 0.23rem;position: initial; display: block;}
	.weui-cell:before{left:0 !important;right:0 !important;}
</style>
